<template>
  <a-modal
    v-model="visible"
    title="选择图片"
    :width="780"
    class="gallery"
    @ok="handleSelect"
  >
    <a-tabs v-model="activeKey" @change="getAssets">
      <a-tab-pane :key="1" tab="图标">
        <GalleryList
          :list="icon[1]"
          :selected="selected"
          @select="res => (selected = res)"
        />
      </a-tab-pane>
      <a-tab-pane :key="2" tab="圆形图标">
        <GalleryList
          :list="icon[2]"
          :selected="selected"
          @select="res => (selected = res)"
        />
      </a-tab-pane>
      <a-tab-pane :key="3" tab="单色线条图标">
        <GalleryList
          :list="icon[3]"
          :selected="selected"
          @select="res => (selected = res)"
        />
      </a-tab-pane>
      <a-tab-pane :key="4" tab="平面图标">
        <GalleryList
          :list="icon[4]"
          :selected="selected"
          @select="res => (selected = res)"
        />
      </a-tab-pane>
      <a-tab-pane :key="5" tab="已上传图片">
        <div class="imgs flex flex-wrap">
          <div
            v-for="i in list"
            :key="i"
            class="img"
            :class="{ active: selected === i }"
            @click="selected = i"
          >
            <img :src="i" />
          </div>
        </div>
        <div class="flex flex-between" style="margin-top:16px">
          <a-upload
            name="file"
            :multiple="multi"
            action="/addons/alioss/index/upload"
            @change="handleUploadChange"
          >
            <!-- :headers="{
              appid: '',
              token: ''
            }" -->
            <a-button type="primary">
              <a-icon type="upload" /><span>上传图片</span>
            </a-button>
          </a-upload>
          <a-pagination
            v-model="pagination.current"
            :page-size="pagination.pageSize"
            :total="pagination.total"
            show-less-items
            @change="getAssetsImages"
          />
        </div>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
import GalleryList from './_GalleryList'
export default {
  name: 'BaseGallery',
  components: {
    GalleryList
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    multi: {
      type: Boolean,
      default: false
    },
    tab: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      activeKey: 1,
      icon: {
        1: [],
        2: [],
        3: [],
        4: []
      },
      list: [],
      pagination: {
        current: 1,
        pageSize: 20,
        total: 0
      },
      selected: ''
    }
  },
  computed: {
    visible: {
      get: function() {
        return this.value
      },
      set: function(newValue) {
        this.$emit('input', newValue)
      }
    }
  },
  watch: {
    visible: function(val) {
      if (val) this.getAssets(this.tab)
    }
  },
  mounted() {
    this.activeKey = this.tab
    // this.getAssets(this.tab)
  },
  methods: {
    getAssets(index) {
      if (index === 5) {
        this.getAssetsImages()
      } else if (this.icon[index].length === 0) this.getAssetsIcons(index)
    },
    getAssetsImages() {
      this.$api.common.getImages(this.pagination.current).then(({ data }) => {
        this.list = data.list
        this.pagination = {
          current: Number(data.current),
          pageSize: Number(data.pageSize),
          total: Number(data.total)
        }
      })
    },
    handleUploadChange({ file }) {
      if (file.status === 'done') {
        if (file.response.code === 1) {
          this.pagination.current = 1
          this.getAssetsImages()
        } else {
          this.$notification.error({
            message: file.response.msg
          })
        }
      } else if (file.status === 'error') {
        this.$notification.error({
          message: file.response.msg
        })
      }
    },
    getAssetsIcons(i) {
      this.$api.common.getIcons(i).then(({ data }) => {
        this.$set(this.icon, i, data)
      })
    },
    handleSelect() {
      this.$emit('select', this.selected)
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.imgs {
  .img {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 4px 4px 0;
    cursor: pointer;
    &.active {
      &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        border: 14px solid @primary-color;
        border-left-color: transparent;
        border-bottom-color: transparent;
      }
      &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border: 3px solid @primary-color;
        z-index: 10;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
